<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
     <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <style>
        table
        {
            border-collapse: collapse;
        }

        th
        {
            border:solid,1px,black;
            padding: 3px;
        }
    </style>
</head>
<body>
     <div id="root"></div>
     <script type="text/babel">
           let Books = [{id:1,name:"《算法导论》",date:"2006-9",price:"85.00",count:1},
                 {id:2,name:"《算法导论》",date:"2006-9",price:"85.00",count:1},
                 {id:3,name:"《算法导论》",date:"2006-9",price:"85.00",count:1},
                 {id:4,name:"《算法导论》",date:"2006-9",price:"85.00",count:1},
                 {id:5,name:"《算法导论》",date:"2006-9",price:"85.00",count:1}
                ]
        class Root extends React.Component
        {
            constructor()
            {
                super();
                this.state = {
                    books:Books
                }
            }

            changeCount(index,num)
            {
                const newBooks = [...this.state.books];
                newBooks[index].count+=num;
                this.setState({
                    books:newBooks
                })
            }

            Delete(index)
            {
               let newBooks = [...this.state.books];
               newBooks.splice(index,1);
               this.setState({
                books:newBooks
               })
            }
            
            TotalPrice()
            {
                return this.state.books.reduce((pre,item)=>{return pre+item.price*item.count},0);
            }

            render()
            {
                let Els = null;
                if(this.state.books.length>0)
                {
                    Els =( <table>
                        <thead>
                            <tr>
                                <th></th>
                                <th>书籍名称</th>
                                <th>出版日期</th>
                                <th>价格</th>
                                <th>数量</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            {this.state.books.map((item,index)=>(
                                <tr key={item.id}>
                                    <th>{item.id}</th>
                                    <th>{item.name}</th>
                                    <th>{item.date}</th>
                                    <th>{item.price}</th>
                                    <th>
                                        <button disabled={item.count<=1} onClick={()=>{this.changeCount(index,-1)}}>-</button>
                                        {item.count}
                                        <button onClick={()=>this.changeCount(index,1)}>+</button></th>
                                    <th>
                                        <button onClick={()=>this.Delete(index)}>删除</button>
                                    </th>
                                </tr>
                          ))}
                        </tbody>
                    </table>)
                }
                else
                {
                    Els = <h2>请加入书籍到购物车</h2>
                }

                return(
                   <div>
                    {Els}
                    <h2>总价格为：{this.TotalPrice()}</h2>
                   </div>

                )
            }
        }
        const root = ReactDOM.createRoot(document.querySelector("#root"));
        root.render(<Root/>)
     </script>
</body>
</html>